<template>
	<view class="maintenance">
		<view class="content">
			<!-- 报事报修 -->
			
			<view class="schedule card" style="margin-top:30rpx;">
				<view class="schedule-item zaozao-row zaozao-row-between mt-12" @click="selectRoom">
					<view class="title">
						选择房屋
					</view>
					<view class="right" @click="selectRoom">
						{{room.address||'选择房屋'}} >
					</view>
				</view>
			</view>
			<!-- 通用样式 -->
			<view class="title" style="margin-bottom: 0;padding-left: 20upx;">问题描述</view>
			<view class="uni-flex-center main-wrapper">
				<view class="uni-cell-100 maintenance-content">
					<textarea class="txa" v-model="content" placeholder="请在此填写你所遇到的问题。"></textarea>
					<view style="height: 20rpx;"></view>
					<view class="title" style="margin-bottom: 0;padding-left: 20upx;">上传图片(选填)</view>
					<view class="media-container">
						<jade-image-upload
						 :list="media"
						 :control="control"
						 :maxCount="maxCount"
						 :compressSize="compressSize"
						 :compressQuality="compressQuality"
						 :compressWidth='compressWidth'
						 :imageSize="imageSize"
						 @chooseFile="chooseFile"
						 @imgDelete="mediaDelete">
						</jade-image-upload>
						<!-- 数据变化的JSON  -->
					</view>
					
					<view class="title" style="margin: 20upx 0 0;padding: 20upx 0;">报修联系人</view>
					<scroll-view class="scroll-view_H" :scroll-x="true">
						<radio-group style="display: flex;">
							<view
								style="display: inline-block;"
								@click="radioChangePerson(index)"
								:class="['person', index === personCurrent ? 'active' : '']"
								v-for="(item, index) in person"
								:key="index"
							>
								<view class="scroll-view-item_H">
									<view class="uni-flex-btw">
										<view class="textt" style="color: #666;">
											<text>{{ item.name }}</text>
											<br />
											{{ item.mobile }}
										</view>
									</view>
								</view>
							</view>
							<view style="display: inline-block;border: 1px solid #ebebeb;border-radius: 8upx;">
								<view class="scroll-view-item_H" @click="addPerson">
									<view class="add">+</view>
									<view class="_add_person">添加联系人</view>
								</view>
							</view>
						</radio-group>
					</scroll-view>
				</view>
			</view>
			
			<view class="uni-flex-center tenance-foot"><button class="foot-btn" plain :disabled="disabled" @tap="sub">提交报修</button></view>
		</view>
		<!-- <li-mask ref="showMask"></li-mask> -->
	</view>
</template>

<script>
import {getList} from "@/api/person.js";
import {add} from "@/api/maintenance.js";
import storage from "@/utils/storage.js";
export default {
	components: {
	},
	data() {
		return {
			headData: [{ text: '报事报修', cls: 'iconweixiujifei' }, { text: '业主投诉', cls: 'icontousuyiwen' }],
			current: 0, //默认报事报修
			baoshi: '',
			jianyi: '',
			type1: '', //报事类型
			type2: '', //投诉类型
			items: [{ text: '立即处理', value: '1' }, { text: '预约处理', value: '2' }],
			delCurrent: 0, //默认立即处理
			personCurrent: 0, //默认联系人
			indexType: 0, //报修类型的索引
			indexType2: 0, //投诉类型的索引
			indexComplaintType: 0,
			complaintImages: [], //报事报修要上传的图片
			times: null,
			content: '', //报修内容
			type: '', //报修类型
			contact: '', //联系人
			nowHours: null,
			endtime: '', //结束时间
			emergency: 1, //紧急程度 1紧急 2不紧急
			firstName: '2',
			person: [],
			types: '',
			disabled: false,
			
			control: true,
			maxCount: 6,
			compressSize: 0.2,
			imageSize: 2,
			compressQuality: 0.8,
			compressWidth: 375,
			
			uploadTask: null,
			media: [], //数据源
			room:{}
		};
	},
	computed: {
		qiniuDatas() {
			return this.$store.state.qiniuData;
		},
		nowDay() {
			let date = new Date();
			return date.getFullYear() + '' + (date.getMonth() + 1) + '' + date.getDate();
		}
	},
	onShow() {
		this.room=storage.getBouseHouse()
		this.getNowTime();
		this.getPersonList();
		
	},
	onLoad(options) {
		if(options.id){
			this.current = options.id;
		}
		if(this.current==0){
			
		}else if(this.current==1){
			uni.setNavigationBarTitle({
				title: '业主投诉'
			});
		}
		
	},
	methods: {
		getPersonList(){
			getList().then((res)=>{
				if(res.data.code==0){
					this.person=res.data.data;
					this.personCurrent=0;
					if (this.person.length > 0) {
						this.contact = this.person[this.personCurrent].id;
					}
				}
			})
		},
		selectRoom(){
			this.$to(`/pages/user/my-house/my-house`)
		},
		//切换投诉建议
		changeBox(index) {
			this.current = index;
		},
		changeTime(index) {
			if (index == 1) {
				this.$refs.limit.show();
			}
		},
		
		getUpToken() {
			let data = {};
			this.$api.upToken(data, res => {
				this.$store.commit('setQiniuData', res.data);
			});
		},
		//切换立即和预约时间
		radioChange(evt) {
			this.delCurrent = 0;
			if (evt.detail.value === '2') {
				this.delCurrent = 1;
				this.emergency = 2;
				this.$refs.limit.show();
			} else {
				this.emergency = 1;
				this.getNowTime();
			}
		},
		//选择联系人
		radioChangePerson(index) {
			this.personCurrent = index;
			this.contact = this.person[index].id;
		},
		
		//选择报修内容
		changeType(index, type) {
			if (type == 1) {
				this.indexType = index;
			} else {
				this.indexType2 = index;
			}
		},
		addPerson() {
			this.$to(`/pages/main/maintenance/add-person`);
		},
		//报事报修要上传的图片
		imageUploadComplaint(img) {
			this.complaintImages = img;
		},

		//上传
		chooseFile(e) {
			this.uploadFileToServe(e)
		},
		//中断上传并删除
		mediaDelete(e) {
			this.uploadTask ? this.uploadTask.abort() : ''
			this.media.splice(e,1)
		},
		uploadFileToServe(urlList) {
			console.log(urlList);
			if (!urlList || urlList.length <= 0) {
				return
			};
			urlList.forEach((item) => {
				this.uploadTask = uni.uploadFile({
					url: 'https://www.zaozaopay.com/applet/upload', //七牛上传接口，仅为示例
					filePath: item.src,
					name: 'file',
					// formData: {
					// 	'token': token
					// },
					success: (res) => {
						let data = JSON.parse(res.data) //七牛返回的数据
						if (!data.data.url) {
							item.status = 'error'
							item.progress = '上传失败'
						} else {
							item.status = 'success'
							item.progress = '上传成功'
							item.src = data.data.url
						}
					}
				});
				this.uploadTask.onProgressUpdate((res) => {
					item.percent = res.progress
					this.media.splice(item.index,1,item)
				})
			})
		},
		async sub() {
			this.disabled = !this.disabled;
			if (!this.content) {
				uni.showToast({
					icon: 'none',
					title: '请填写内容'
				});
				this.disabled = !this.disabled;
				return;
			}
			if (!this.contact) {
				uni.showToast({
					icon: 'none',
					title: '请先选择联系人'
				});
				this.disabled = !this.disabled;
				return;
			}
			if (!this.room.id) {
				uni.showToast({
					icon: 'none',
					title: '请先选择房屋'
				});
				this.disabled = !this.disabled;
				return;
			}
			uni.showLoading({
				title: '正在上传数据...'
			});

			let data = {
				type: this.current,
				content: this.content,
				imgs: this.media,
				contact: this.person[this.personCurrent].id,
				room:this.room
			};
			add(data).then((res)=>{
				if(res.data.code==0){
					uni.showModal({
						title:"提示",
						content:"提交成功",
						showCancel:false,
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					});
				}
				uni.hideLoading()
			})
		},
		getNowTime() {
			this.$forceUpdate();
			let date = new Date();
			this.nowHours = date.getHours();
			if (date.getMinutes() > 30) {
				this.nowHours = date.getHours() + 1;
				this.times = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + this.nowHours + ':00';
				this.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + (this.nowHours + 2) + ':00';
			} else {
				this.times = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + this.nowHours + ':00';
				this.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + (this.nowHours + 2) + ':00';
			}
		}
	},
	
};
</script>
<style scoped lang="less">
@import './maintenance.css';
.media-container {
	padding: 30rpx 26rpx;
	box-sizing: border-box;
}
.schedule{
	margin-top:20rpx;
	background: #fff;
	padding:40rpx 20rpx;
	box-sizing: border-box;
	
	.pointer{
		margin-left:30rpx;
		width: 20rpx;
		height: 20rpx;
		background: #6ADBB6;
		opacity: 0.4;
		border-radius: 50%;
	}
	.title{
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}
	.schedule-item{
		box-sizing: border-box;
		.left{
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
		.right{
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
	}
}
.card{
	.pointer{
		margin-left:30rpx;
		width: 20rpx;
		height: 20rpx;
		background: #6ADBB6;
		opacity: 0.4;
		border-radius: 50%;
	}
	.title{
		margin-left:12rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}
}
</style>
